<template>
  <div class="login">
    <mt-header title="登录">
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="banner">
      <div class="icon">
        <div slot="icon" class="iconfont">&#xe608;</div>
      </div>
    </div>
    <div class="container">
      <Form ref="loginForm" :model="formData" :rules="rules" @keydown.enter="handleSubmit">
        <mt-field placeholder="请输入用户名" v-model="formData.nickName"></mt-field>
        <mt-field placeholder="请输入密码" v-model="formData.pwd" type="password"></mt-field>
      </Form>
      <div class="button">
        <mt-button type="primary" size="large" @click.native="handleSubmit">登录</mt-button>
      </div>
      <div class="reg-pwd">
        <div class="swapper">
          <router-link tag="span" class="text" to="/register">注册账号</router-link>
          <span class="split">|</span>
          <router-link tag="span" class="text" to="/#">找回密码</router-link>
        </div>
      </div>
    </div>

    <div class="third-party">
      <div class="we-chat">
        <div class="icon-swapper">
          <div slot="icon" class="iconfont">&#xe6ea;</div>
        </div>
        <div class="text">微信登录</div>
      </div>
    </div>
    <div class="agreement">
      注册或登录代表您同意
      <a @click="popupVisible1 = true">《风车旅行用户注册协议》</a>
    </div>

    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade"
      class="mint-popup-1"
      :closeOnClickModal="false"
    >
      <h1>用户注册协议</h1>
      <div class="content" ref="content"></div>
      <mt-button size="large" type="primary" @click.native="popupVisible1 = false">已阅读并同意</mt-button>
    </mt-popup>
  </div>
</template>

<script>
import axios from "axios";
import { mapActions } from "vuex";
export default {
  name: "login",
  data() {
    return {
      formData: {
        nickName: "",
        pwd: ""
      },
      rules: {
        nickName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" }
          // { type: 'string', min: 6, message: '密码长度必须大于6位', trigger: 'blur' }
        ]
      },
      popupVisible1: false,
    };
  },
  props: [],
  methods: {
    ...mapActions(["handleLogin"]),
    getPageInfo() {
      axios.get("/static/mock/agreement.json").then(res => {
        if (res.data) {
          this.$refs.content.innerHTML = res.data;
        }
      });
    },
    handleSubmit() {
      this.handleLogin(this.formData).then(res => {
        this.$router.push("/mine");
      });
    }
  },
  mounted() {
    this.getPageInfo();
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/modifyMintUIColor.styl';

.login {
  height: 100%;

  .banner {
    height: 3rem;
    position: relative;

    .icon {
      height: 1.8rem;
      width: 1.8rem;
      border-radius: 0.4rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: $themeColor;

      .iconfont {
        font-size: 1.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
  }

  .container {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    background-color #fff;

    >>> .mint-cell:last-child {
      background: none;
    }

    >>> .mint-cell-wrapper {
      border-radius: 4px;
      border: solid 1px $themeColor;
      margin: 10px;
      background: none;
    }

    .button {
      padding: 0.2rem;
    }

    .reg-pwd {
      position: relative;
      height: 1rem;

      .swapper {
        width: 3rem;
        height: 0.4rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 0.4rem;

        .text {
          color: $themeColor;
        }

        .split {
          color: #ccc;
        }
      }
    }
  }

  .third-party {
    height: 1.4rem;
    margin-top: 0.5rem;

    .we-chat {
      .icon-swapper {
        width: 0.9rem;
        height: 0.9rem;
        line-height: 0.9rem;
        border-radius: 0.45rem;
        background-color: #fff;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;

        .iconfont {
          color: #3CB034;
          font-size: 0.6rem;
        }
      }

      .text {
        height: 0.3rem;
        line-height: 0.3rem;
        margin-top: 0.2rem;
        font-size: 0.2rem;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
    }
  }

  .agreement {
    margin-top: 0.4rem;
    text-align: center;
  }

  .mint-popup-1 {
    width: 80%;
    border-radius: 8px;
    padding: 10px;

    // transform: translate(-50%, 0);
    h1 {
      font-size: 20px;
      color: $themeColor;
      text-align: center;
    }

    .content {
      width: 100%;
      height: 7rem;
      overflow: scroll;
      margin: 0.2rem 0;
    }

    p {
      margin-bottom: 10px;
    }
  }
}
</style>